<template>
	<view>
		<view class="container">排行榜</view>
		<div>
			<div class="playerContainer" v-for="(item, index) in sortList" :key="item.id">
				<div class="playerInfo">
					<span>{{ index + 1 }}</span>
					<span>{{  item.username  }}</span>
					<span>Score: {{  item.score  }}</span>
				</div>
			</div>
		</div>
		<button @click="showDialog=true">打开弹窗</button>
		<view v-if="showDialog" class="dialog">
			<view class="dialog-content">
				<text class=milky>你收到一个今日训练推荐！</text>
				<view class="siuu"></view>
				<view class="flex-container">
					<button class="button" @click="navigateToPage">Go</button>
					<button class="button" @click="showDialog = false">Stay</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '../../tool/tool';
	export default {
		data() {
			return {
				showDialog: false,
				// scoreList: [{
				// 	id: 1,
				// 	score: 1
				// }, {
				// 	id: 2,
				// 	score: 20
				// }, {
				// 	id: 3,
				// 	score: 90
				scoreList:[],
				
			}
		},
		onShow() {
			uni.request({
				url: baseUrl + "/UserAccount/getRank",
					method: "GET",
					success:(res)=>{
						console.log(res.data)
						if (!Array.isArray(res.data)) {
							// 这里假设 res.data 是一个对象，我们需要将它放入一个数组中  
							// 注意：如果服务器应该返回数组但返回了对象，这可能是一个错误，应该与后端开发人员确认  
							this.scoreList = [res.data]; // 将对象放入数组中  
						} else {
							this.scoreList= res.data; // 如果已经是数组，则直接赋值  
						}
					}
				})
			},
		
		computed: {
			sortList() {
				return this.scoreList.slice().sort((a, b) => b.score - a.score);
			}
		},
		methods: {
			navigateToPage() {
				this.showDialog = false,
					uni.navigateTo({
						url: "../../pages/DailyTrain/DailyTrain"
					})
			}

		}
	}
</script>

<style>
	.container {}

	.dialog {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		z-index: 1000;
		/* 确保弹窗在最顶层 */
	}

	.dialog-content {
		text-align: center;
		width: 500rpx;
	}

	.flex-container {
		display: flex;
		/* 关键样式 */
		/* 可以添加flex相关的其他样式来控制对齐、间距等 */
		justify-content: space-between;
	}

	.button {
		width: 200rpx;

		/* 示例：按钮之间等间距分布 */
	}
	.siuu{
		height: 50rpx;
	}
	.milky{
			   font-size: 23px;   /*设置文字大小*/
			   color:#3366FF;  /*设置文字颜色*/
			   text-shadow: 0 8px 10px #6699FF;  /*设置文字阴影*/                  
			   font-weight: bolder;  /*设置文字宽度*/                              
			   text-align: center;  /*设置文字居中*/                              
	
			}
</style>